<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#div1{ border:1px solid #000;position: absolute; display: none;}
		a{display: block;padding:10px 50px; color: #000; text-decoration: none; line-height: 30px; border-bottom: 1px dashed #333; text-align: center;}
		a:last-child{border: none;}
		a:hover{background-color: #000;color: #fff}

		#line1{width: 100%; height: 1px; background-color: red;position: absolute;top:394px;}
		#line2{width: 1px; height: 100%; background-color: yellow;position: absolute;left:1215px;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');

		document.oncontextmenu = function (ev) {
			var ev = ev || event;

			oDiv.style.display = 'block';

			var oW = oDiv.offsetWidth;			//这有在变成block是才能获取到宽度
			var oH = oDiv.offsetHeight;			//这有在变成block是才能获取到高度
			var maxL = document.documentElement.clientWidth - oW;
			var maxT = document.documentElement.clientHeight - oH;

			if (ev.clientY > maxT && ev.clientX <= maxL) {
				oDiv.style.top = ev.clientY - oDiv.offsetHeight + 'px';
				oDiv.style.left = ev.clientX + 'px';
			}else if(ev.clientX > maxL && ev.clientY <= maxT){
				oDiv.style.left = ev.clientX - oDiv.offsetWidth + 'px';
				oDiv.style.top = ev.clientY + 'px';
			}else if(ev.clientY > maxT && ev.clientX > maxL){
				oDiv.style.top = ev.clientY - oDiv.offsetHeight + 'px';
				oDiv.style.left = ev.clientX - oDiv.offsetWidth + 'px';		
			}else{
				oDiv.style.left = ev.clientX + 'px';
				oDiv.style.top = ev.clientY + 'px';
			}

			return false;
		};

		document.onclick = function (){
			oDiv.style.display = 'none';
		}
	}
	</script>
</head>
<body>
	<div id="div1">
		<a href="javascript:;">剪切</a>
		<a href="javascript:;">复制</a>
		<a href="javascript:;">删除</a>
		<a href="javascript:;">刷新</a>
		<a href="javascript:;">新建</a>
	</div>
	<div id="line1"></div>
	<div id="line2"></div>
</body>
</html>